<template>
    <div style="padding: 10px;display: flex;flex-direction: column;height: 100%">
        <a-form :form="form" layout="vertical">
            <a-row>
                <a-col :span="24">
                    <div class="table-operator">
                        <a-form-item style="margin-bottom: 0px" :label="i18n('list.cellStyle','操作列风格')">
                            <div class="button-from-list">
                                <div class="button-from" @click="disposition(1)"
                                     :class="[styleButton=='1'?'button-from-hover':'']">
                                    <span
                                        style="border-right: 1px solid #dadde0">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                                    <span>{{ $ti18('rxList.delBtn', '删除') }}</span>
                                    <my-icon v-if="styleButton=='1'" class="rx-card-item-imgbox"
                                             type="iconright"></my-icon>
                                </div>
                                <div class="button-from" @click="disposition(2)"
                                     :class="[styleButton=='2'?'button-from-hover':'']">
                                    <span><my-icon type="iconedit"></my-icon>{{ $ti18('rxList.editBtn', '编辑') }}</span>
                                    <span><my-icon type="iconVue3_delete"></my-icon>{{ $ti18('rxList.delBtn', '删除') }}</span>
                                    <my-icon v-if="styleButton=='2'" class="rx-card-item-imgbox"
                                             type="iconright"></my-icon>
                                </div>
                                <div class="button-from" @click="disposition(3)"
                                     :class="[styleButton=='3'?'button-from-hover':'']">
                                    <a-button style="margin-right: 10px" size="small" type="primary">
                                        {{ $ti18('rxList.editBtn', '编辑') }}
                                    </a-button>
                                    <a-button size="small">{{ $ti18('rxList.delBtn', '删除') }}</a-button>
                                    <my-icon v-if="styleButton=='3'" class="rx-card-item-imgbox"
                                             type="iconright"></my-icon>
                                </div>
                                <div class="button-from" @click="disposition(4)"
                                     :class="[styleButton=='4'?'button-from-hover':'']">
                                    <a-button style="margin-right: 10px" size="small" type="primary">
                                        <my-icon type="iconedit"></my-icon>
                                        {{ $ti18('rxList.editBtn', '编辑') }}
                                    </a-button>
                                    <a-button size="small">
                                        <my-icon type="icontrash"></my-icon>
                                        {{ $ti18('rxList.delBtn', '删除') }}
                                    </a-button>
                                    <my-icon v-if="styleButton=='4'" class="rx-card-item-imgbox"
                                             type="iconright"></my-icon>
                                </div>
                                <div class="button-from" @click="disposition(5)"
                                     :class="[styleButton=='5'?'button-from-hover':'']">
                                    <my-icon type="iconedit" style="margin-right: 10px;color: #1890ff"></my-icon>
                                    <my-icon type="icontrash" style="color: #1890ff"></my-icon>
                                    <my-icon v-if="styleButton=='5'" class="rx-card-item-imgbox"
                                             type="iconright"></my-icon>
                                </div>
                                <div class="button-from" @click="disposition(6)"
                                     :class="[styleButton=='6'?'button-from-hover':'']">
                                    <a-button style="margin-right: 10px" size="small" type="primary">
                                        <my-icon type="iconedit"></my-icon>
                                    </a-button>
                                    <a-button size="small">
                                        <my-icon type="icontrash"></my-icon>
                                    </a-button>
                                    <my-icon v-if="styleButton=='6'" class="rx-card-item-imgbox"
                                             type="iconright"></my-icon>
                                </div>
                            </div>
                        </a-form-item>
                        <a-form-item style="margin-bottom: 0px" :label="i18n('list.maxButton','最大按钮显示数')">
                            <div class="button-input-number">
                                <div style="width: 120px;margin-right: 10px">
                                    <a-input-number v-model="maxButton"/>
                                </div>
                                <div style="flex: 1;opacity:0.4;">
                                    {{ i18n('list.moreTip', '操作列最多显示的按钮数量，超出的显示在更多里') }}
                                </div>
                            </div>
                        </a-form-item>
                        <a-button @click="addRow">{{ $ti18('rxList.add', '新增') }}</a-button>
                        <a-button v-if="isDialog == 'NO'" @click="addToolbarAllRows">
                            {{ i18n('list.newDefault', '新增默认') }}
                        </a-button>
                        <a-button @click="removeRow">{{ $ti18('rxList.delBtn', '删除') }}</a-button>
                        <a-button @click="upRow">{{ $comi18('grid.up', '向上') }}</a-button>
                        <a-button @click="downRow">{{ $comi18('grid.down', '向下') }}</a-button>
                    </div>
                </a-col>
            </a-row>
        </a-form>
        <div style="flex: 1">
            <rx-grid ref="table"
                     :dataSource="buttons"
                     :columns="columnsList"
                     :allowRowSelect="true"
                     :multiSelect="true"
                     :showPage="false"
            >
                <span slot="alias" slot-scope="{text,record,index}">
                    <div v-if="record.defaultBtn">
                        {{ text }}
                    </div>
                    <a-input v-else v-model="record.alias" @change="changeAlias($event,record)"/>
                </span>
                <span slot="btnLabel" slot-scope="{text,record,index}">
                   <a-input v-model="record.btnLabel"
                            @change="updateI18nName(record,'btnLabel')">
                        <my-icon slot="addonAfter" type="iconearth-full"
                                 @click="editI18nName(record,'btnLabel')"/>
                    </a-input>
                </span>
                <span slot="btnShow" slot-scope="{text,record,index}">
                    <div class="btnShow">
                        <div> <span v-if="text"><div
                            style='color: #2ebc01'>{{ i18n('list.configured', '已配置') }}</div></span><span
                            v-else><div>{{ i18n('list.notConfigured', '未配置') }}</div></span></div>
                        <div><a-icon type="edit" @click="openShowSetting(record,'btnShow')"/>
                            <a-icon type="delete" style="margin-left: 10px;"
                            @click="clearShowSetting(record,'btnShow')"/></div>
                    </div>
                </span>
                <template slot="type" slot-scope="{text,record,index}">
                    <div v-if="record.defaultBtn">
                        {{ i18n('list.default', '默认') }}
                    </div>
                    <a-select style="width: 100%;" v-else :options="buttonType" v-model="record.type"
                              @change="changeBtnType(record)">
                    </a-select>
                </template>
                <span slot="btnClick" slot-scope="{text,record,index}">
                         <div v-if="record.type!='custom'">
                            {{ record.btnClick }}
                        </div>
                        <a-input v-else v-model="record.btnClick"/>
                    </span>
                <template slot="config" slot-scope="{text,record,index}">
                    <a-button v-if="(!record.defaultBtn && record.type!='custom') || record.alias=='editRow'"
                              @click="configButton(record)">{{ i18n('list.config', '配置') }}
                    </a-button>
                </template>
                <template slot="buttonStyle" slot-scope="{text,record,index}">
                    <a-select v-model="record.buttonStyle">
                        <a-select-option v-for="(obj,index) in  buttonStyle" :value="obj">
                            {{ obj }}
                        </a-select-option>
                    </a-select>
                </template>
                <template slot="icon" slot-scope="{text,record,index}">
                    <rx-input-icon style="width: 62px" v-model="record.icon"
                                   @change="iconChange($event, record,index)"/>
                </template>
                <template slot="Disable" slot-scope="{text,record,index}">
                    <div class="btnShow">
                        <div><span v-if="text"><div
                            style='color: #2ebc01'>{{ i18n('list.configured', '已配置') }}</div></span><span v-else><div>{{ i18n('list.notConfigured', '未配置') }}</div></span>
                        </div>
                        <div>
                            <a-icon type="edit" @click="openShowSetting(record,'Disable')"/>
                            <a-icon type="delete" style="margin-left: 10px;"
                                    @click="clearShowSetting(record,'Disable')"/>
                        </div>
                    </div>
                </template>
            </rx-grid>
        </div>
    </div>
</template>

<script>
import actionPermission from "./actionPermission";
import {Dialog, RxGrid, Util} from "@lowcode/jpaas-common-lib"
import FormBoListApi from "@/api/form/core/formBoList";
import FormBoListConfigOpenFormDialog from "@/views/modules/form/core/FormBoListConfigOpenFormDialog";
import FormBoListConfigOpenListDialog from "@/views/modules/form/core/FormBoListConfigOpenListDialog";
import FormWordTemplateDialog from "@/views/modules/form/core/FormWordTemplateDialog";
import FormPdfPrintDialog from "@/views/modules/form/core/FormPdfPrintDialog";
import FormCustomPageSetting from "@/views/modules/form/core/FormCustomPageSetting";
import ListMethodDialog from "@/views/modules/form/core/dialog/ListMethodDialog.vue";
import FormListOpenUreportDialog from "@/views/modules/form/core/FormListOpenUreportDialog.vue";
import rxInputIcon from '@/components/rxComponent/rx-input-icon'
import FormLiteFlowDialog from "@/views/modules/form/bo/FormLiteFlowDialog";

export default {
    name: "renderConfig_action",
    props: ["layerid", "destroy", "listId", "curFields", "rowEdit", "isDialog", "boDefId"],
    components: {
        RxGrid,
        rxInputIcon
    },
    data() {
        return {
            form: this.$form.createForm(this),
            i18nDefault: process.env.VUE_APP_LANGUAGE,
            i18nCurrent: "",
            buttons: [],
            columns: [
                {
                    title: this.$ti18('rxList.index', '序号'),
                    dataIndex: 'sn',
                    type: 'indexColumn',
                    scopedSlots: {customRender: 'sn'},
                    width: 40
                },
                {
                    title: this.$ti18('rxForm.name', '名称'),
                    dataIndex: 'btnLabel',
                    scopedSlots: {customRender: 'btnLabel'},
                    width: 140
                },
                {
                    title: this.$ti18('rxForm.rxAlias', '别名'),
                    dataIndex: 'alias',
                    scopedSlots: {customRender: 'alias'},
                    width: 100
                },
                {
                    title: this.$ti18('rxForm.type', '类型'),
                    dataIndex: 'type',
                    scopedSlots: {customRender: 'type'},
                    width: 150
                },
                {
                    title: this.i18n('list.config', '配置'),
                    dataIndex: 'config',
                    scopedSlots: {customRender: 'config'},
                    width: 100
                },
                {
                    title: this.i18n('form.displayCon', '显示条件'),
                    dataIndex: 'btnShow',
                    scopedSlots: {customRender: 'btnShow'},
                    width: 100
                },
                {
                    title:  this.i18n('form.disableConditions', '禁用条件'),
                    dataIndex: 'Disable',
                    scopedSlots: {customRender: 'Disable'},
                    width: 100
                },

                {
                    title: this.i18n('form.eventFunc', '事件函数'),
                    dataIndex: 'btnClick',
                    scopedSlots: {customRender: 'btnClick'},
                    width: 100
                }
            ],
            columnsList: [],
            columnsControls: [
                {title: '按钮风格', dataIndex: 'buttonStyle', scopedSlots: {customRender: 'buttonStyle'}, width: 100},
                {title: '图标', dataIndex: 'icon', scopedSlots: {customRender: 'icon'}, width: 50}
            ],
            defaultBtn: [],
            buttonType: [
                {
                    label: this.i18n('form.openForm', '打开表单'),
                    value: "openCustomForm",
                    method: "openCustomForm",
                    needConfig: true,
                    preDef: true,
                    config: {formAlias: "", formName: "", formConfig: "", boDefId: ""},
                    i18nJson: JSON.stringify({
                        "zh-CN": "打开表单",
                        "en-US": "Open Form",
                        "ja-JP": "フォームを開く",
                        "es-ES": "Abrir formulario"
                    })
                },
                {
                    label: this.i18n('form.openList', '打开列表'),
                    value: "openCustomList",
                    method: "openCustomList",
                    needConfig: true,
                    preDef: true,
                    config: {boListId: "", name: "", alias: "", boList: "", listConfig: ""},
                    i18nJson: JSON.stringify({
                        "zh-CN": "打开列表",
                        "en-US": "Open List",
                        "ja-JP": "リストを開く",
                        "es-ES": "Abrir lista"
                    }),
                },
                {
                    label: this.i18n('form.wordPrint', 'Word打印'),
                    value: "wordPrint",
                    method: 'wordPrint',
                    config: {templateId: "", boDefId: ""},
                    needConfig: true,
                    preDef: false,
                    i18nJson: JSON.stringify({
                        "zh-CN": "Word打印",
                        "en-US": "Word Printing",
                        "ja-JP": "Word印刷",
                        "es-ES": "Impresión de Word"
                    }),
                },
                {
                    label: this.i18n('form.openReport', '打开报表'),
                    value: "openReport",
                    method: 'openReport',
                    config: {templateId: "", boDefId: "", alias: "",},
                    needConfig: true,
                    preDef: false,
                    i18nJson: JSON.stringify({
                        "zh-CN": "打开报表",
                        "en-US": "Open Report",
                        "ja-JP": "レポートを開く",
                        "es-ES": "Abrir informe"
                    }),
                },
                {
                    label: this.i18n('form.pdfPrint', '打开PDF打印'),
                    value: "openPdfPrint",
                    method: 'openPdfPrint',
                    config: {templateId: "", boDefId: "", alias: "",},
                    needConfig: true,
                    preDef: false,
                    i18nJson: JSON.stringify({
                        "zh-CN": "打开PDF打印",
                        "en-US": "Open PDF Printing",
                        "ja-JP": "PDF印刷を開く",
                        "es-ES": "Abrir impresión de PDF"
                    }),
                },
                {
                    label: this.i18n('form.customPage', '打开定制页面'),
                    value: "openCustomPageRow",
                    method: 'openCustomPageRow',
                    config: {templateId: "", boDefId: "", alias: "",},
                    needConfig: true,
                    preDef: false,
                    i18nJson: JSON.stringify({
                        "zh-CN": "打开定制页面",
                        "en-US": "Open Custom Page",
                        "ja-JP": "カスタムページを開く",
                        "es-ES": "Abrir página personalizada"
                    }),
                },
                {
                    label: this.i18n('form.custom', '自定义'),
                    value: "custom",
                    method: "",
                    needConfig: true,
                    config: {action: ""},
                    preDef: false,
                    i18nJson: JSON.stringify({
                        "zh-CN": "自定义",
                        "en-US": "Custom",
                        "ja-JP": "カスタム＃カスタム＃",
                        "es-ES": "Personalizado"
                    }),
                },
                {
                    label: this.i18n('form.handleLiteFlow', '规则引擎'),
                    value: "handleLiteFlow",
                    method: "handleLiteFlow",
                    needConfig: true,
                    config: {liteFlowId: "", liteFlowName: ""},
                    preDef: false,
                    i18nJson: JSON.stringify({
                        "zh-CN": "规则引擎",
                        "en-US": "Rule Engine",
                        "ja-JP": "ルールエンジン",
                        "es-ES": "Engorro de reglas"
                    }),
                },
            ],
            srcFields: [],
            fields: [],
            maxButton: 3,
            styleButton: 1,
            buttonStyle: ['primary', 'default', 'dashed', 'danger'],
            icon: [
                {
                    type: 'customIcon',
                    icon: 'iconedit'
                },
                {
                    type: 'customIcon',
                    icon: 'iconVue3_delete'
                },
                {
                    type: 'customIcon',
                    icon: 'iconVue3jpaas-icon_liucheng'
                }
            ]
        }
    },
    computed: {
        table() {
            return this.$refs.table;
        },
    },
    created() {
        this.getCurrentI18n();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCellRender", key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "apiFormCore", key);
        },
        getCurrentI18n() {
            this.i18nCurrent = window.localStorage.getItem("language");
            if (!this.i18nCurrent) {
                this.i18nCurrent = this.i18nDefault;
            }
        },
        updateI18nName(record, text) {
            let i18nJson = this.getI18nJson(record, text);
            i18nJson[this.i18nCurrent] = record[text];
            var newRow = {
                i18nJson: JSON.stringify(i18nJson)
            };
            let table = this.$refs.table;
            table.updateRow(record, newRow);
            table.$forceUpdate();
        },
        getI18nJson(row, text) {
            let i18nJson = {};
            let i18nConf = row.i18nJson;
            if (i18nConf) {
                if (typeof i18nConf == 'string') {
                    i18nJson = JSON.parse(i18nConf);
                }
                let val = i18nJson[this.i18nCurrent];
                if (!val) {
                    i18nJson[this.i18nCurrent] = row[text];
                }
            } else {
                i18nJson[this.i18nCurrent] = row[text];
                i18nJson[this.i18nDefault] = row[text];
            }
            return i18nJson;
        },
        editI18nName(record, text) {
            let row = record;
            let table = this.$refs.table;
            let self_ = this;
            let conifg = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    i18nJson: this.getI18nJson(row, text)
                }
            }
            Dialog.openI18nDialog(conifg, function (action, data) {
                row[text] = data[self_.i18nCurrent];
                var newRow = {
                    i18nJson: JSON.stringify(data)
                };
                table.updateRow(row, newRow);
                table.$forceUpdate();
            });
        },
        configButton(row) {
            let type = row.type;
            let key = "func_" + type;
            if (!this[key]) {
                let msg = this.i18n('msa.PleaseDefine', '请定义') + `[${key}]` + this.i18n('msa.method', '方法')
                this.$message.warning(msg);
                return;
            }
            this[key](row);
        },
        /**
         * 配置打开表单
         */
        func_openCustomForm(row) {
            let config = row.config;
            var conf = {
                curVm: this,
                data: {pkId: this.listId, formConfig: config.formConfig},
                widthHeight: ['800px', '600px'],
                component: FormBoListConfigOpenFormDialog,
                title: this.i18n('list.openFormConfig', '打开表单配置')

            };
            Util.open(conf, function (action, data) {
                if (action != 'ok') return;
                row.config.formAlias = data.formAlias;
                row.config.formName = data.formName;
                row.config.boDefId = data.boDefId;
                row.config.formConfig = JSON.stringify(data);
                row['isSetedBtn'] = true
            })
        },
        func_openCustomList(row) {
            let config = row.config;
            var conf = {
                curVm: this,
                data: {conf: config.listConfig, fieldDts: this.curFields},
                widthHeight: ['800px', '600px'],
                component: FormBoListConfigOpenListDialog,
                title: this.i18n('list.listConfig', '打开列表配置')

            };
            Util.open(conf, function (action, data) {
                if (action != 'ok') return;
                row.config.listConfig = JSON.stringify(data);
                row['isSetedBtn'] = true
            })
        },
        //配置word打印
        func_wordPrint(row) {
            //var boDefId = this.form.getFieldValue("bodefId");
            var boDefId = this.boDefId
            var self = this;
            var config = {
                "curVm": self,
                data: {
                    "boDefId": boDefId,
                    "config": row.config,
                    "templateId": row.config.templateId,
                },
                component: FormWordTemplateDialog,
                title: self.i18n('list.selectWordTemp', '选择word模板'),
                widthHeight: ['800px', '600px']
            };
            Util.open(config, function (action, data) {
                if (action != 'ok') return;
                row.config = {templateId: data.pkId, boDefId: boDefId};

            });
        },
        //配置打开报表
        func_openReport(row) {
            var self = this;
            if (row.config.params == null) {
                row.config.params = [];
            }
            var config = {
                "curVm": self,
                data: {
                    pkId: this.listId,
                    customConfig: row.config
                },
                component: FormListOpenUreportDialog,
                title: self.i18n('list.selectReport', '选择报表'),
                widthHeight: ['800px', '600px']
            };
            Util.open(config, function (action, data) {
                if (action != 'ok') return;
                row.config = data;

            });
        },
        //配置打开pdf打印
        func_openPdfPrint(row) {
            var boDefId = this.boDefId
            var self = this;
            var config = {
                "curVm": self,
                data: {
                    pkId: this.listId,
                    templateId: row.config.templateId,
                    boDefId: boDefId
                },
                component: FormPdfPrintDialog,
                title: self.i18n('list.selectPDF', '选择Pdf模板'),
                widthHeight: ['800px', '600px']
            };
            Util.open(config, function (action, data) {
                if (action != 'ok') return;
                row.config = {};
                if (!data) {
                    return;
                }
                row.config.templateId = data.pkId;

            });
        },
        //配置打开定制页面
        func_openCustomPageRow(row) {
            var self = this;
            var config = {
                "curVm": self,
                data: {
                    pkId: this.listId,
                    config: row.config
                },
                component: FormCustomPageSetting,
                title: self.i18n('list.selectPage', '选择定制页面'),
                widthHeight: ['800px', '600px']
            };
            Util.open(config, function (action, data) {
                if (action != 'ok') return;
                row.config = data;

            });
        },
        //配置规则引擎
        func_handleLiteFlow(row) {
            var self = this;
            var config = {
                "curVm": self,
                data: {
                    "liteFlowId": row.config.liteFlowId
                },
                component: FormLiteFlowDialog,
                title: this.i18n('form.handleLiteFlow', "规则引擎"),
                widthHeight: ['900px', '700px']
            };
            Util.open(config, function (action, data) {
                if (action != 'ok') return;
                row.config = {liteFlowId: data.pkId, liteFlowName: data.chainDesc};
            });
        },
        changeBtnType(record) {
            if (!record.alias) {
                record.type = '';
                this.$message.warning(this.i18n('msa.enterAlias', '请先输入别名'));
                return;
            }
            let aryType = this.buttonType.filter(item => {
                return record.type == item.value;
            });
            if (aryType.length > 0) {
                let btnType = Util.deepClone(aryType[0]);
                if (!record.btnLabel) {
                    record.btnLabel = btnType.label;
                }
                if (btnType.method == "openCustomForm") {
                    record.btnClick = 'openCustomFormList' + '(' + "'" + record.alias + "'" + ',row)';
                } else if (btnType.method == "openCustomList") {
                    record.btnClick = 'openFormList' + '(' + "'" + record.alias + "'" + ',row)';
                } else if (btnType.method == "wordPrint") {
                    record.btnClick = 'wordPrintList' + '(' + "'" + record.alias + "'" + ',row)';
                } else if (btnType.method == "openReport") {
                    record.btnClick = 'openReport' + '(' + "'" + record.alias + "'" + ',row)';
                } else if (btnType.method == "openPdfPrint") {
                    record.btnClick = 'openPdfPrint' + '(' + "'" + record.alias + "'" + ',row)';
                } else if (btnType.method == "openCustomPageRow") {
                    record.btnClick = 'openCustomPageRow' + '(' + "'" + record.alias + "'" + ',row)';
                } else if (btnType.method == "handleLiteFlow") {
                    record.btnClick = 'handleLiteFlow' + '(' + "'" + record.alias + "'" + ',row)';
                } else {
                    record.btnClick = record.alias + '(row)'
                }
                // 如果按钮本身存在国际化数据，不进行覆盖
                if (record.i18nJson) {
                    btnType.i18nJson = record.i18nJson;
                }
                Object.assign(record, btnType);
            }
        },
        changeAlias(e, record) {
            const {value} = e.target;
            let type = record.type;
            if (type == "openCustomForm") {
                record.btnClick = 'openCustomFormList' + '(' + "'" + record.alias + "'" + ',record)';
            } else if (type == "openCustomList") {
                record.btnClick = 'openFormList' + '(' + "'" + record.alias + "'" + ',record)';
            } else if (type == "wordPrint") {
                record.btnClick = 'wordPrintList' + '(' + "'" + record.alias + "'" + ',record)';
            } else if (type == "openReport") {
                record.btnClick = 'openReport' + '(' + "'" + record.alias + "'" + ',record)';
            } else if (type == "openPdfPrint") {
                record.btnClick = 'openPdfPrint' + '(' + "'" + record.alias + "'" + ',record)';
            } else if (type == "openCustomPageRow") {
                record.btnClick = 'openCustomPageRow' + '(' + "'" + record.alias + "'" + ',record)';
            } else if (type == "handleLiteFlow") {
                record.btnClick = 'handleLiteFlow' + '(' + "'" + record.alias + "'" + ',record)';
            }
        },
        setData(data, fieldDts, listId, rowEdit) {
            var btnList = data.btnList;
            this.maxButton = data.maxButton || 3;
            this.styleButton = data.styleButton || 1;
            this.columnsList = JSON.parse(JSON.stringify(this.columns))
            this.columnsInit(this.styleButton)
            if (!btnList) {
                btnList = [];
            }
            btnList.forEach(item => {
                item['btnShow_editable'] = true;
            })
            this.srcFields = fieldDts;
            this.getFields(listId);
            this.defaultBtn = [
                {
                    alias: "delRowById",
                    btnLabel: this.$ti18('rxList.delBtn', '删除'),
                    btnClick: 'delRowById(row)',
                    defaultBtn: true,
                    btnShow: "",
                    btnShow_editable: true,
                    type: "",
                    config: '',
                    buttonStyle: 'default',
                    icon: JSON.stringify(this.icon[1]),
                    i18nJson: JSON.stringify({
                        "zh-CN": "删除",
                        "en-US": "Delete",
                        "ja-JP": "削除＃サクジョ＃",
                        "es-ES": "Eliminar"
                    })
                },
                {
                    alias: "bpmDetail",
                    btnLabel: this.i18n('list.processHandle', '流程办理'),
                    btnClick: 'bpmDetail(row)',
                    defaultBtn: true,
                    btnShow: "",
                    btnShow_editable: true,
                    type: "",
                    config: '',
                    buttonStyle: 'default',
                    icon: JSON.stringify(this.icon[2]),
                    i18nJson: JSON.stringify({
                        "zh-CN": "流程办理",
                        "en-US": "Process Handling",
                        "ja-JP": "プロセス処理",
                        "es-ES": " manejo del proceso"
                    })
                }
            ];
            if (rowEdit != 'YES') {
                this.defaultBtn.splice(0, 0, {
                    alias: "editRow",
                    btnLabel: this.$ti18('rxList.editBtn', '编辑'),
                    btnClick: 'editRow(row)',
                    defaultBtn: true,
                    btnShow: "",
                    btnShow_editable: true,
                    type: "editRow",
                    config: {isMax: "YES", height: 600, width: 800},
                    buttonStyle: 'primary',
                    icon: JSON.stringify(this.icon[0]),
                    i18nJson: JSON.stringify({"zh-CN": "编辑", "en-US": "Edit", "ja-JP": "編集", "es-ES": "Editar"})
                });
            }
            this.$nextTick(function () {
                this.table.addRows(btnList);
            })
        },
        validate(callback, e) {
            var arr = [];
            var json = this.table.getData();
            for (var i = 0; i < json.length; i++) {
                if (arr.includes(json[i].alias)) {
                    e.loading = false;
                    this.$message.error(this.i18n('msa.notSetSame', '不可设置同别名按钮！'));
                    return;
                }
                arr.push(json[i].alias);
            }
            callback();
        },
        getData() {
            var json = this.table.getData();
            return {btnList: json, maxButton: this.maxButton, styleButton: this.styleButton};
        },
        addRow() {
            let obj = {
                alias: "",
                btnLabel: '',
                btnClick: '',
                defaultBtn: false,
                btnShow_editable: true,
                buttonStyle: 'default',
                icon: JSON.stringify(this.icon[0])
            };
            this.table.addRow(obj);
        },
        addToolbarAllRows() {
            let defaultBtnList = Util.deepClone(this.defaultBtn);
            defaultBtnList.forEach(defaultBtn => {
                let isFind = false;
                this.buttons.forEach(btn => {
                    if (defaultBtn.alias === btn.alias) {
                        isFind = true;
                        return;
                    }
                })

                if (!isFind) {
                    this.buttons.push(defaultBtn);
                }

            })
            this.$refs.table.$forceUpdate()
        },
        removeRow() {
            this.table.removeRows();
        },
        upRow() {
            this.table.moveUp();
        },
        downRow() {
            this.table.moveDown();
        },
        clearShowSetting(record, type) {
            record[type] = "";
        },
        openShowSetting(record, type) {
            let btnShow = record[type];
            if (!btnShow) {
                btnShow = JSON.stringify({
                    type: "field",
                    setting:{
                        condition: "AND",
                        rules: [],
                    },
                    script: ""
                })
            }
            let localPermssion=JSON.parse(btnShow);
            let self = this;
            if(Array.isArray(localPermssion.setting) && localPermssion.setting.length>0){
                this.$confirm({
                    title: this.i18n('tips','提示'),
                    content:this.i18n('oldData','旧数据是否需要重新配置?'),
                    zIndex:999999999,
                    okType: 'danger',
                    onOk() {
                        btnShow = JSON.stringify({
                            type: "field",
                            setting:{
                                condition: "AND",
                                rules: [],
                            },
                            script: ""
                        })
                        self.openShow(btnShow,record,type)
                    },
                    onCancel() {

                    },
                });
            }else {
                self.openShow(btnShow,record,type)
            }
        },
        openShow(btnShow,record,type){
            let config = {
                curVm: this, widthHeight: ['800px', '600px'],
                component: actionPermission,
                data: {
                    srcFields: this.fields,
                    permission: btnShow
                },
                title: this.i18n('list.conConfig', '显示条件配置')
            };
            Util.open(config, function (action, data) {
                if (action == "ok") {
                    record[type] = data;
                }
            });
        },
        getFields(listId) {
            this.fields = [];
            FormBoListApi.reloadColumns(listId).then(res => {
                for (var i = 0; i < res.data.length; i++) {
                    var newRow = {
                        label: res.data[i].header,
                        value: res.data[i].field,
                        key: res.data[i].dataType
                    }
                    this.fields.push(newRow);
                }
            });
        },
        func_editRow(row) {
            var self = this;
            var config = {
                "curVm": self,
                data: {
                    "config": row.config
                },
                component: ListMethodDialog,
                title: this.i18n('list.listMethod', '列表按钮配置'),
                widthHeight: ['600px', '400px']
            };
            Util.open(config, function (action, data) {
                if (action != 'ok') return;
                row.config = data;
            });
        },
        disposition(index) {
            this.styleButton = index;
            this.columnsList = JSON.parse(JSON.stringify(this.columns));
            this.columnsInit(index)
        },
        columnsInit(index) {
            if (index == 2) {
                this.columnsList.push(this.columnsControls[1]);
            } else if (index == 3) {
                this.columnsList.push(this.columnsControls[0]);
            } else if (index == 4) {
                this.columnsList.push(...this.columnsControls);
            } else if (index == 5) {
                this.columnsList.splice(1, 1);
                this.columnsList.push(this.columnsControls[1]);
            } else if (index == 6) {
                this.columnsList.splice(1, 1);
                this.columnsList.push(...this.columnsControls);
            }
        },
        iconChange(icon, record, index) {
            let iconJson = JSON.parse(icon)
            this.buttons[index].icon = icon
        },
    }
}
</script>

<style scoped>
.rx-card-item-imgbox {
    position: absolute;
    top: 1px;
    right: 2px;
    color: white;
    font-size: 13px;
    z-index: 99;
}

.button-input-number {
    display: flex;
    align-items: center;
}

.button-from-list {
    display: flex;
}

.button-from {
    padding: 0px 23px;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #dadde0;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    position: relative;
}

.button-from-hover {
    border: solid 1px #1890ff;
}

.button-from-hover:before {
    content: "";
    border-top: 15px solid #2e86ff;
    border-right: 15px solid #2e86ff;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
    top: -1px;
    right: -1px;
    position: absolute;
    z-index: 2;
}

.button-from:hover {
    border: solid 1px #1890ff;
}

.button-from span {
    color: #1890ff;
    height: 10px;
    display: flex;
    align-items: center;
    line-height: 10px;
}

.button-from span i {
    margin-right: 5px;
}

.button-from span:first-child {
    padding-right: 10px;
}

.button-from span:nth-child(2) {
    padding-left: 10px;
}

.btnShow {
    display: flex;
}

.btnShow > div:nth-child(1) {
    margin-right: 5px;
}
</style>